<h3>响应</h3>
<div class="tab" id="response-tab" *ngIf="invokeResult">
    <ul>
        <li *ngIf="invokeResult.status===200" [class.active]="activeResponseTab == 'bodyJson'" (click)="setTab('bodyJson')">Pretty Json</li>
        <li [class.active]="activeResponseTab=='body'" (click)="setTab('body')">{{invokeResult.status===200?'Raw Body':'Error Resp'}}</li>
        <li [class.active]="activeResponseTab == 'response-headers'" (click)="setTab('response-headers')" *ngIf="invokeResult && invokeResult.headers && invokeResult.headers.length > 0">
            Headers ({{invokeResult.headers.length}})
        </li>
    </ul>
    <div class="position-right">
        <ng-container *ngIf="invokeResult.status===200">
            状态码:{{invokeResult.status}}
        </ng-container>
        <ng-container *ngIf="invokeResult.status!==200">
            发生错误
        </ng-container>
        <ng-container *ngIf="invokeResult.responseAtMillis">
        　　耗时:{{invokeResult.responseAtMillis}}ms
        </ng-container>
    </div>
    <div class="tab-content" id="response-body" [class.active]="activeResponseTab=='body'">
<pre>
{{invokeResult.responseBody}}
</pre>
    </div>
    <div class="tab-content" id="response-body-json" [class.active]="activeResponseTab == 'bodyJson'">
        <ngx-json-viewer *ngIf="responseBody" [json]="responseBody" [expanded]="true"></ngx-json-viewer>
    </div>
    <div class="tab-content" id="response-headers" [class.active]="activeResponseTab == 'response-headers'">
        <table class="table">
            <thead>
            <tr>
                <th>KEY</th>
                <th>VALUE</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let header of invokeResult.headers">
                <td>{{header.key}}</td>
                <td>{{header.value}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
